{% extends "Industrial_Logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
{% endblock header %}
{% block content %}
    <div class="container-fluid">
        <div id="message" style="position:absolute;right:50px;top:80px;width:250px;background:pink;height:300px;overflow-y:scroll" ></div>
        <div class="row" id="cam_list">
        </div>
    </div>

    <div style="border: 1px red solid;background-color: #00a65a" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        视频监控
                    </h4>
                </div>
                <div class="modal-body">
                    <img id="real_cam" alt="" style="height: 300px;width: 100%;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        function get_video(camera_id) {
            $('#real_cam').attr('src', '/monitor/real?uid=' + camera_id)
        }
        $(function () {
            $('#myModal').on('hide.bs.modal', function () {
                $('#real_cam').attr('src', '')
            })
        });
        $(function () {
             var ws = new WebSocket("ws://127.0.0.1:8001/ws/notice");
             var html = '';
             ws.onmessage = function (data) {
                 var data = JSON.parse(data.data);
                 html += data.message + ' ' + data.time + '<br>';
                 $("#message").html(html);

             }
            $.get('/monitor/camera_list', function (data) {
                var camList=data.data;
                console.log(camList)
                var html='';
                camList.forEach(element => {
                    html+=
                    "<div style='width:230px;float:left;margin-left:20px'>"+
                        "<div class='thumbnail'>"+
                            "<div class='caption'>"+
                                "<p>名称："+element.name+"</p>"+
                                "<p>位置："+element.position+"</p>"+
                                "<p>状态："+element.is_active+"</p>"+
                                    "<a href='#' class='btn btn-primary' role='button' data-toggle='modal' data-target='#myModal' onclick=get_video('"+element.uid+"')>" +
                        "查看监控<img src='http://127.0.0.1:8000/monitor/video_feed/"+ element.uid+"'></a>"+
                                "</p>"+
                            "</div>"+
                        "</div>"+
                    "</div>"
                });
                $("#cam_list").html(html);
            });
        })
    </script>
{% endblock content %}